/**
 * eadmin / www.eadmin.com.cn
 * 
 * 表单
 */

@import "../global";

::-webkit-input-placeholder{
    color:@color-7;
}
:-moz-placeholder{
    color:@color-7;
}
::-moz-placeholder{
    color:@color-7;
}
:-ms-input-placeholder{
    color:@color-7;
}
input,
textarea{
    .border-radius();
    .animate-form();
    padding: 10px;
    border:1px @input-color-1 solid;
    background: @input-color-3;
    width: 100%;
    color: @font-color-1;
}
input:focus,
textarea:focus{
    .animate-form();
    .box-shadow();
    outline: none;
    border-color: @color-3;
    background: @input-color-4;
}
input:disabled,
textarea:disabled{
    cursor: not-allowed;
    color: @color-6;
}
input:disabled::-webkit-input-placeholder,
textarea:disabled::-webkit-input-placeholder{
    color:@color-6;
}
input:disabled:-moz-placeholder,
textarea:disabled::-webkit-input-placeholder{
    color:@color-6;
}
input:disabled::-moz-placeholder,
textarea:disabled::-webkit-input-placeholder{
    color:@color-6;
}
input:disabled:-ms-input-placeholder,
textarea:disabled::-webkit-input-placeholder{
    color:@color-6;
}
label{
    position: relative;
}
textarea{
    cursor: text;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.no-resize{
    resize: none;
}
.icon-input,
.icon-input-right{
    i:not(.add):not(.cut){
        position: absolute;
        top: 0px;
    }
}
.icon-input{
    input{
        padding-left: 26px;
    }
    i{
        left:8px;
    }
}
.icon-input-right{
    input{
        padding-right: 24px;
    }
    i{
        margin-right: 0;
        right: 8px;
    }
}
.error-input
{
    border-color: @mcolor-1;
    background: @input-color-2;
    &:focus{
        border-color: @mcolor-1;
        background: @input-color-2;
    }
}
input[type="radio"],
input[type="checkbox"],
select{
    border:0;
    position:absolute;
    left:-9999px;
}
select{
    min-width: 120px;
}
.radio,
.radio-disabled,
.radio-checked,
.radio-disabled-checked,
.checkbox,
.checkbox-disabled,
.checkbox-checked,
.checkbox-disabled-checked{
    margin-right: 10px;
    line-height: 40px;
    display: inline-block;
    i{
        font-size: 18px;
        margin-right: 0;
        font-weight: bold;
    }
}
.radio,
.checkbox,
.checkbox-checked{
    cursor: pointer;
}
.radio-disabled,
.radio-disabled-checked,
.checkbox-disabled,
.checkbox-disabled-checked{
    color: @color-6;
    cursor: not-allowed;
}
.radio,
.checkbox{
    i{
        .animate(color);
    }
}
.radio-checked,
.checkbox-checked{
    i{
        .animate(color);
        color: @color-3;
    }
}
.radio-tag,
.radio-checked-tag,
.radio-disabled-tag{
    .border-radius();
    padding: 10px 15px;
    cursor: pointer;
    display: inline-block;
    margin-bottom: 5px;
}
.radio-tag{
    border:2px dashed @input-color-1;
}
.radio-checked-tag{
    border:2px solid @color-3;
    color: @color-3;
    background: lighten(@color-3, 46%);
}
.radio-disabled-tag{
    border:2px dashed @input-color-1;
    color: @color-6;
    cursor: not-allowed;
}
.select{
    .border-radius();
    padding: 10px 30px 8px 10px;
    border:1px @input-color-1 solid;
    background: @input-color-3;
    display: inline-block;
    position: relative;
    cursor: pointer;
    margin-right: 5px;
    i:not(.rotate){
        position: absolute;
        right: 0px;
        top: 10px;
    }
    i.ri-loader-4-line{
        font-size: @font-size-2;
    }
    span{
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        display: inline-block;
        width: 100%;
    }
    .select-clear{
        display: none;
    }
}
.select-disabled{
    cursor: not-allowed;
    border-color: @input-color-1;
    span, i{
        color: @color-6;
    }
}
.select-option{
    .border-radius();
    .box-shadow();
    display: none;
    position: absolute;
    border:1px @input-color-1 solid;
    background: @color-10;
    margin-top: 5px;
    outline: none;
    z-index: 9999;
    cursor: pointer;
    ul{
        padding: 6px;
        position: relative;
        max-height: 240px;
        li{
            padding: 5px 10px 5px 5px;
            cursor: pointer;
            label{
                height: 26px;
                line-height: 26px;
                width: 100%;
            }
            &:not(:first-child){
                margin-top: 4px;
            }
            &:hover{
                .border-radius();
                background: @color-5;
            }
        }
        .multiple{
            padding: 0 10px 0 5px;
        }
        .active{
            .border-radius();
            background: @color-5;
        }
    }
    .disabled{
        color: @color-6;
        cursor: not-allowed;
        &:hover{
            background: @color-10;
        }
    }
}
.checkbox-switch{
    .border-radius(50px);
    background: @color-7;
    width: 44px;
    height: 22px;
    cursor: pointer;
    padding: 3px;
    display: inline-block;
    position: relative;
    span{
        .animate(margin-left);
        .border-radius(50px);
        background: @font-color-3;
        width:16px;
        height: 16px;
        display: inline-block;
        position: absolute;
    }
}
.switch-open{
    .linear();
    span{
        .box-shadow();
        .animate(margin-left);
        margin-left: 22px;
    }
}
.switch-disabled{
    cursor: not-allowed;
    background: @color-6;
}